<template>
  <el-dialog
    v-el-drag-dialog
    title="租赁费用设置"
    :visible.sync="visible"
    width="1136px"
    @closed="reset"
  >
    <el-descriptions size="medium" border>
      <el-descriptions-item label="编码">{{ temp.goodsCode }}</el-descriptions-item>
      <el-descriptions-item label="名称">{{ temp.goodsName }}</el-descriptions-item>
      <el-descriptions-item label="类别">{{ temp.gtName }}</el-descriptions-item>
    </el-descriptions>
    <table class="pure-table">
      <thead>
        <tr>
          <th />
          <th>基准值</th>
          <th>居民</th>
          <th>商业</th>
          <th>工业</th>
          <th>上限</th>
          <th>下限</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="width: 5rem;">押金</td>
          <th>
            <el-input-number
              ref="ypFee1Ref"
              v-model="formData.ypFee1"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.deposit1"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.deposit2"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.deposit4"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.maxYpFee"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.minYpFee"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
        </tr>
        <tr>
          <td>租金</td>
          <th>
            <el-input-number
              ref="zpfee1Ref"
              v-model="formData.zpFee1"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.rental1"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.rental2"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.rental4"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.maxZpFee"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.minZpFee"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
        </tr>
        <tr>
          <td>总租金</td>
          <th />
          <th />
          <th />
          <th />
          <th>
            <el-input-number
              v-model="formData.maxTotalZpFee"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
          <th>
            <el-input-number
              v-model="formData.minTotalZpFee"
              :controls="false"
              :min="0"
              :max="10000"
              :precision="2"
              @blur="inputFormat"
            />
          </th>
        </tr>
      </tbody>
    </table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 关闭 </el-button>
      <el-button :loading="$loadingPlugin.success" type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { goodsLeaseCostSave, queryLeaseCostData } from '@/api'
  export default {
    name: 'setLeaseDialog',
    data() {
      return {
        visible: false,
        org: null,
        temp: {},
        priceInfo: null,
        formData: {
          ypFee1: undefined,
          maxYpFee: undefined,
          minYpFee: undefined,
          zpFee1: undefined,
          maxZpFee: undefined,
          minZpFee: undefined,
          maxTotalZpFee: undefined,
          minTotalZpFee: undefined
        }
      }
    },
    methods: {
      open(temp, org) {
        this.org = org
        this.getDeaultData(temp, org)
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
          }
        })
      },
      async getDeaultData(temp, org) {
        const res = await queryLeaseCostData({
          goodsId: temp.goodsId,
          orgId: org.orgId
        })
        this.priceInfo = JSON.parse(res.data.depositFeeInfo)
        if (this.priceInfo.ypFee1 & (0x01 > 0)) { this.$set(this.formData, 'ypFee1', (this.priceInfo.ypFee1 >> 1) * 0.01) }
        if (this.priceInfo.zpFee1 & (0x01 > 0)) { this.$set(this.formData, 'zpFee1', (this.priceInfo.zpFee1 >> 1) * 0.01) }

        if (this.priceInfo.deposit1 & (0x01 > 0)) { this.$set(this.formData, 'deposit1', (this.priceInfo.deposit1 >> 1) * 0.01) }
        if (this.priceInfo.deposit2 & (0x01 > 0)) { this.$set(this.formData, 'deposit2', (this.priceInfo.deposit2 >> 1) * 0.01) }
        if (this.priceInfo.deposit4 & (0x01 > 0)) { this.$set(this.formData, 'deposit4', (this.priceInfo.deposit4 >> 1) * 0.01) }
        if (this.priceInfo.rental1 & (0x01 > 0)) { this.$set(this.formData, 'rental1', (this.priceInfo.rental1 >> 1) * 0.01) }
        if (this.priceInfo.rental2 & (0x01 > 0)) { this.$set(this.formData, 'rental2', (this.priceInfo.rental2 >> 1) * 0.01) }
        if (this.priceInfo.rental4 & (0x01 > 0)) { this.$set(this.formData, 'rental4', (this.priceInfo.rental4 >> 1) * 0.01) }

        if (this.priceInfo.maxYpFee & (0x01 > 0)) { this.$set(this.formData, 'maxYpFee', (this.priceInfo.maxYpFee >> 1) * 0.01) }
        if (this.priceInfo.minYpFee & (0x01 > 0)) { this.$set(this.formData, 'minYpFee', (this.priceInfo.minYpFee >> 1) * 0.01) }
        if (this.priceInfo.maxZpFee & (0x01 > 0)) { this.$set(this.formData, 'maxZpFee', (this.priceInfo.maxZpFee >> 1) * 0.01) }
        if (this.priceInfo.minZpFee & (0x01 > 0)) { this.$set(this.formData, 'minZpFee', (this.priceInfo.minZpFee >> 1) * 0.01) }
        if (this.priceInfo.maxTotalZpFee & (0x01 > 0)) {
          this.$set(
            this.formData,
            'maxTotalZpFee',
            (this.priceInfo.maxTotalZpFee >> 1) * 0.01
          )
        }
        if (this.priceInfo.minTotalZpFee & (0x01 > 0)) {
          this.$set(
            this.formData,
            'minTotalZpFee',
            (this.priceInfo.minTotalZpFee >> 1) * 0.01
          )
        }
      },
      async success() {
        const formData = JSON.parse(JSON.stringify(this.formData))
        formData.ypFee1 = this.amountHandle(formData.ypFee1)
        formData.maxYpFee = this.amountHandle(formData.maxYpFee)
        formData.minYpFee = this.amountHandle(formData.minYpFee)
        formData.zpFee1 = this.amountHandle(formData.zpFee1)
        formData.maxZpFee = this.amountHandle(formData.maxZpFee)
        formData.minZpFee = this.amountHandle(formData.minZpFee)
        formData.minTotalZpFee = this.amountHandle(formData.minTotalZpFee)
        formData.maxTotalZpFee = this.amountHandle(formData.maxTotalZpFee)

        formData.deposit1 = this.amountHandle(formData.deposit1)
        formData.deposit2 = this.amountHandle(formData.deposit2)
        formData.deposit4 = this.amountHandle(formData.deposit4)
        formData.rental1 = this.amountHandle(formData.rental1)
        formData.rental2 = this.amountHandle(formData.rental2)
        formData.rental4 = this.amountHandle(formData.rental4)
        if (!formData.ypFee1) {
          this.$message.error('请输入押瓶费')
          this.$refs['ypFee1Ref'].focus()
          return
        }
        if (!formData.zpFee1) {
          this.$message.error('请输入租瓶费')
          this.$refs['zpfee1Ref'].focus()
          return
        }
        if (formData.maxYpFee) {
          if (formData.maxYpFee < formData.ypfee1) {
            this.$message.error('押金上限不能小于基准值!')
            return
          }
          if (formData.deposit1 && formData.maxYpFee < formData.deposit1) {
            this.$message.error('押金上限不能小于居民用户押金!')
            return
          }
          if (formData.deposit2 && formData.maxYpFee < formData.deposit2) {
            this.$message.error('押金上限不能小于非居民用户押金!')
            return
          }
          if (formData.deposit4 && formData.maxYpFee < formData.deposit4) {
            this.$message.error('押金上限不能小于工业用户押金!')
            return
          }
        }
        console.log(formData)
        if (formData.minYpFee) {
          if (formData.minYpFee > formData.ypfee1) {
            this.$message.error('押金下限不能大于基准值!')
            return
          }
          if (formData.deposit1 && formData.minYpFee > formData.deposit1) {
            this.$message.error('押金下限不能大于居民用户押金!')
            return
          }
          if (formData.deposit2 && formData.minYpFee > formData.deposit2) {
            this.$message.error('押金下限不能大于商业用户押金!')
            return
          }
          if (formData.deposit4 && formData.minYpFee > formData.deposit4) {
            this.$message.error('押金下限不能大于工业用户押金!')
            return
          }
        }
        if (
          formData.maxYpFee &&
          formData.minYpFee &&
          formData.maxYpFee < formData.minYpFee
        ) {
          this.$message.error('押金上限不能小于下限!')
          return
        }
        if (formData.maxZpFee) {
          if (formData.maxZpFee < formData.zpfee1) {
            this.$message.error('租金上限不能小于基准值!')
            return
          }
          if (formData.rental1 && formData.maxZpFee < formData.rental1) {
            this.$message.error('租金上限不能小于居民用户租金!')
            return
          }
          if (formData.rental2 && formData.maxZpFee < formData.rental2) {
            this.$message.error('租金上限不能小于商业用户租金!')
            return
          }
          if (formData.rental4 && formData.maxZpFee < formData.rental4) {
            this.$message.error('租金上限不能小于工业用户租金!')
            return
          }
        }
        if (formData.minZpFee) {
          if (formData.minZpFee > formData.zpfee1) {
            this.$message.error('租金下限不能大于基准值!')
            return
          }
          if (formData.rental1 && formData.minZpFee > formData.rental1) {
            this.$message.error('租金下限不能大于居民用户租金!')
            return
          }
          if (formData.rental2 && formData.minZpFee > formData.rental2) {
            this.$message.error('租金下限不能大于商业用户租金!')
            return
          }
          if (formData.rental4 && formData.minZpFee > formData.rental4) {
            this.$message.error('租金下限不能大于工业用户租金!')
            return
          }
        }
        if (
          formData.maxZpFee &&
          formData.minZpFee &&
          formData.maxZpFee < formData.minZpFee
        ) {
          this.$message.error('租金上限不能小于下限!')
          return
        }
        if (
          formData.maxTotalZpFee &&
          formData.minTotalZpFee &&
          formData.maxTotalZpFee < formData.minTotalZpFee
        ) {
          this.$message.error('总租金上限不能小于下限!')
          return
        }
        const json = { ...formData }
        json.goodsId = this.temp.goodsId
        json.orgId = this.org.orgId
        json.orgName = this.org.orgName
        json.orgSNNo = this.org.orgSNNo
        json.gtId = this.temp.gTypeId
        json.gtName = this.temp.gtName
        await goodsLeaseCostSave(json)
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      },
      inputFormat(e) {
        if (e.target.value) e.target.value = Number(e.target.value).toFixed(2)
      },
      amountHandle(e) {
        if (e === '' || e === undefined) {
          return 0
        } else {
          e = e * 100
          return (e << 1) | 1
        }
      },
      reset() {
        this.type = 'add'
        this.formData = {
          ypFee1: undefined,
          maxYpFee: undefined,
          minYpFee: undefined,
          zpFee1: undefined,
          maxZpFee: undefined,
          minZpFee: undefined,
          maxTotalZpFee: undefined,
          minTotalZpFee: undefined
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.pure-table {
  border: 1px solid #cbcbcb;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

.pure-table caption {
  padding: 1em 0;
  font: italic 85%/1 arial, sans-serif;
  color: #000;
  text-align: center;
}

.pure-table td,
.pure-table th {
  padding: 0.5em 1em;
  margin: 0;
  overflow: visible;
  font-size: inherit;
  line-height: 2rem;
  text-align: center;
  border-left: 1px solid #cbcbcb;
  border-width: 0 0 0 1px;
}

.pure-table thead {
  color: #000;
  text-align: left;
  vertical-align: bottom;
  background-color: #e0e0e0;
}

.pure-table td {
  background-color: transparent;
}

.pure-table-bordered td {
  border-bottom: 1px solid #cbcbcb;
}

.pure-table-bordered tbody > tr:last-child > td {
  border-bottom-width: 0;
}
</style>
